<template name='user_astrict'>

	<view class="box-infos font14 " >
		<view class=" " >
			<view class="top-but">
				<view class="top-but-box background-fff ">
					<text selectable="true"   class="tipss ">商城的首页设置</text>
					<view @click="$common.noMultipleClicks('fun_ini_',fun_ini_)" class="rightButttom" >
						<img src="../../static/img/update.png" class="ico"></img>
						刷新
					</view>
				</view>
			</view>
			<view class="menu-scroll" style="height: calc(100% - 56px);">
				
				
				<!-- 首页轮播图设置 -->
				<view class="box-list">
					<view class="title">
						<text selectable="true"  class="justify font18">首页轮播图设置</text>
						<view class="tipss">
							轮播图展示于小程序首页顶部的广告图片，可用于指向某个商品页面进行促销
						</view>
						
						<view class="rightButttom" 
						@click="openAddBanner(null)" 
						>增加</view>
					</view>
					<!-- 轮播图数据列表 -->
					<view style="min-height: 200px;">
						<view class="banner-box banner"
						v-for="(item,index) in banner.list" 
						:key="index">
							<img class="imgs" :src="item.img"></img>
							<img class="de-img" 
							@click="$common.noMultipleClicks('deleteBanner',deleteBanner,item.id)" 
							src="../../static/img/delete.png"></img>
							<view  class="content">
								{{item.goods_name}}
							</view>
							<!-- <view class="but-bot">
								<view @click="openAddBanner(index)" class="delete but alter">
									编辑
								</view>
								<view class="status0" v-if="item.goods.mp_grounding==0">商品未上架商城</view>
								<view @click="$common.noMultipleClicks('deleteBanner',deleteBanner,item.id)" class="delete but color-e40318">
									删除
								</view>
							</view> -->
						</view>
					</view>
					<!-- 数据列表end -->
					
					<!-- 增加轮播图 -->
					<uni-popup ref="add_banner" type="center" title="增加轮播图" minHeight="auto" minWidth="auto">
						<view class="box-infos">
							<view class="justify  gap10">
							<view class="add-box">
								
								
								<view class="bannerImgAdd" v-if="!banner.imgPath" @click="chooseImage('banner')">
									<image class="imgs" src="/static/img/add1.png"></image>
								</view>
								<image v-if="banner.imgPath" mode="heightFix" style="height: 200px;" class="imgs" :src="banner.imgPath" @click="chooseImage('banner')"></image>
								
							</view>
							<view class="add-box" style="gap: 10px;display: grid;">
								<view class="leftTitle">欲要跳转的商品页面：(可空)</view>
								<input 
								v-model="banner.goodsId" 
								placeholder="输入欲要跳转的商品ID"
								placeholder-class="placeholder-class"
								@confirm="uploadbanner"
								class="pop-input"  />
							</view>	
							
							<view class="but-box">
								<view class="but-boxs">
									<view @click="$refs.add_banner.close"  class="add-but-close">
										取 消
									</view>
									<view @click="$common.noMultipleClicks('uploadbanner',uploadbanner)"  class="add-but-com">
										确定
									</view>
								</view>
							</view>
							<view class="tips">
								商品id为用户在小程序里面点击轮播图的时候跳转到那个商品页面的id
							</view>
							</view>
						</view>
					</uni-popup>
					<!-- end -->
				</view>
				<!-- end -->

				<!-- 首页第三方小程序推荐 -->
				<view class="box-list">
					<view class="title">
						<text selectable="true"  class="justify font18">第三方小程序推荐</text>
						<view class="tipss">
							展示于小程序首页的推荐分类起始位置，点击可跳转至第三方小程序
						</view>
						<view class="rightButttom" 
						@click="$refs.add_applet.open"
						>增加</view>
					</view>
					<view style="width: 100%;display: flex;min-height: 200px;" >
						<view class="header">
							<view class="header-box" v-for="(item,index) in applet.list" :key="index">
								<img class="imgs" :src="item.img"></img>
								<img class="de-img" 
								@click="appletDelete(item.id)" 
								src="../../static/img/delete.png"></img>
								<view class="name">{{item.name}}</view>
							</view>
							
						</view>
					</view>
					
					<!-- 增加 -->
					<uni-popup ref="add_applet" type="center" title="增加第三方小程序" minHeight="auto" minWidth="auto">
					<view class="box-infos">
						<view class="justify  gap10">
							<view class="add-box">
								<image v-if="!applet.imgPath" class="mp_applet" src="../../static/img/add1.png" 
								@click="chooseImage('applet')"></image>
								
								<image v-if="applet.imgPath" class="mp_applet" :src="applet.imgPath" 
								@click="chooseImage('applet')"></image>
								
							</view>
							<view class="add-box" style="gap: 10px;display: grid;">
								<view class="leftTitle">ApppId：</view>
								<input 
								v-model="applet.app_id" 
								placeholder="输入第三方小程序的app_id"
								placeholder-class="placeholder-class"
								@confirm="uploadApplet"
								class="pop-input"  />
							</view>	
							<view class="tips" >
								ApppId 在小程序的右上角->更多资料中可找到
							</view>
							
							<view class="add-box" style="gap: 10px;display: grid;">
								<view class="leftTitle">小程序名称：</view>
								<input 
								v-model="applet.name" 
								placeholder="输入展示的名称"
								placeholder-class="placeholder-class"
								@confirm="uploadApplet"
								class="pop-input"  />
							</view>	
							<view class="tips">
								在小程序中展示的名称4-6个汉字
							</view>
							
							<view class="but-box">
								<view class="but-boxs">
									<view @click="$refs.add_applet.close"  class="add-but-close">
										取 消
									</view>
									<view @click="$common.noMultipleClicks('uploadApplet',uploadApplet)"  class="add-but-com">
										确定
									</view>
								</view>
							</view>
							<view class="tips">
								商品id为用户在小程序里面点击轮播图的时候跳转到那个商品页面的id
							</view>
						</view>
					</view>
					</uni-popup>
					<!-- end -->
				</view>
				<!-- end -->
				
			
				<!-- 首页分类推荐 -->
				<view class="box-list">
					<view class="title">
						<text selectable="true"  class="justify font18" >首页分类推荐</text>
						<view class="tipss">
							分类展示于小程序首页中部，可增加某些常用目录进行促销;一般情况下增加8个目录最好
						</view>
					</view>
					<view class="con-box">
						<header_select 
						:headerList="headerData.list" 
						@call_directory="call_directory"
						></header_select>
					</view>
					<view style="width: 100%;display: flex;min-height: 200px;">
						
						<view class="header">
							<view class="header-box" v-for="(item,index) in headerData.seleList" :key="index">
								<img class="imgs" :src="item.img"></img>
								<img class="de-img" 
								@click="header_home_de(item.id)" 
								src="../../static/img/delete.png"></img>
								<view class="name">{{item.name}}</view>
							</view>
							
						</view>
					</view>
				</view>
				<!-- end -->
				
				<!-- 首页商品推荐 -->
				<view class="box-list">
					<view class="title">
						<text selectable="true"  class="justify font18">首页商品推荐</text>
						<view class="tipss">
							分类展示于小程序首页中部，可增加某些常用商品进行促销;一般情况下增加3个最好
						</view>
						<view class="rightButttom" 
						@click="selectGoodsType='goods_home_up',$refs.select_goods.open()"
						>增加</view>
					</view>
					<view class="header" style="min-height: 200px;">
						<view class="header-box" v-for="(item,index) in addGoods.list" :key="index">
							<img class="imgs" :src="item.img.length>0 ? item.img[0].source:''"></img>
							<img class="de-img" 
							@click="goods_home_de(item.mp_id)" 
							src="../../static/img/delete.png"></img>
							<view class="name">{{item.name}}</view>
							
							<view class="status0" v-if="item.mp_grounding==0">商品未上架商城</view>
						</view>
						
					</view>
					
				</view>
				<!-- end -->
			</view>
			
		
		</view>
	
	
		
		<select_goods ref="select_goods" @change="readTiChuGoods"></select_goods>
	</view>

</template>

<script>
	import header_select from "@/components/header-get/header_select.vue"
	import select_goods from "@/components/goods/selectGoods.vue"
	export default{
		components: {
			header_select,select_goods
		},
		name:'user_astrict',
		data(){
			return{
				selectGoodsType:'',//当前选择商品的用途
				applet:{//第三方小程序
					list:[],//
					imgPath:'',//欲要上传的图标
					app_id:'',//指向的app_id
					name:''
				},
				banner:{
					list:[],//
					imgPath:'',//欲要上传的轮播图
					goodsId:'',//指向的商品ID
					id:'',//欲要修改的轮播图ID
					imgPathTmp:'',//原始图片
				},
				headerData:{
					list:[],//所有的分类数据
					seleList:[],//选中的分类数据
				},
				addGoods:{
					list:[],//所有的分类数据
				},
				addGoodsList:[]
			}
		},
		 // 此处定义传入的数据
		props: {
		},
		mounted(){
		},
		created() {
			this.fun_ini_()
		},
		methods:{
			readTiChuGoods(res){
				var that = this
				this.addGoodsList = []
				try {
					var data = JSON.stringify(res)
					var list = res.data
				
					for(var i=0;i<list.length;i++){
						this.addGoodsList.push(list[i].id)
					}
					if(this.selectGoodsType=='goods_home_up'){
						this.goods_home_up()
					}
					this.$refs.select_goods.close()
				} catch (e) {
				}
			},
			fun_ini_(){
				this.banner_get()
				this.loadHeader()
				this.header_home_get()
				this.goods_home_get()
				this.appletGet()
			},
			/**
			 * 图片上传-选择图片
			 * 
			*/
			chooseImage(type){
				var that = this
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'], //original 原图，compressed 压缩图，
					success:(e)=>{
						if(type=='banner'){
							that.banner.imgPath = e.tempFilePaths[0]
						}else{
							that.applet.imgPath = e.tempFilePaths[0]
						}
					},
					fail:(res)=>{
						if(res.errMsg){
							uni.showModal({
									title:'错误',
									content:res.errMsg,
									showCancel:false
							});
						}
					}
				})
			},
			/**
			 * 图片上传-
			 * 
			*/
			uploadbanner(){
				var that = this
			
				if(that.banner.imgPath.length==0){
					that.$common.toast("未上传轮播图")
					return
				}
				that.$common.uploadFile(
					that.banner.imgPath,
					{
						type:'banner_up_img',
						goods_id:that.banner.goodsId,
						id:that.banner.id,
					},
					(res)=>{
						that.$refs.add_banner.close()
						that.banner_get()
					},
				)
			},
			/**
			 * 图片上传-
			 * 
			*/
			uploadApplet(){
				var that = this
				if(that.applet.app_id.length==0){
					that.$common.toast("未填写需要指向的程序ID")
					return
				}
				if(that.applet.imgPath.length==0){
					that.$common.toast("未上传图标")
					return
				}
				that.$common.uploadFile(
					that.applet.imgPath,
					{
						type:'applet_up_img',
						app_id:that.applet.app_id,
						name:that.applet.name,
					},
					(res)=>{
						that.$refs.add_applet.close()
						that.appletGet()
					},
				)
			},
			
			/**
			 * 增加轮播图
			 * 
			*/
			openAddBanner(index=null){
				var that = this
				if(index==null){
					that.banner.id=""
					that.banner.imgPathTmp = ''
				}else{
					that.banner.goodsId = that.banner.list[index].goods_id
					that.banner.imgPath = that.banner.list[index].img
					that.banner.imgPathTmp     = that.banner.list[index].img
					that.banner.id      = that.banner.list[index].id
				}
				that.$refs.add_banner.open();
			},
		
			
			/**
			 * 删除轮播图
			 * 
			*/
			deleteBanner(id){
				var that = this
				
				uni.showModal({
					title: '提示',
					content: '是否确定删除此信息？',
					confirmText: "退出",
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{
									type:'banner_de',
									id:id,
								},
								(res)=>{
									that.banner_get()
								}
							);
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			/**
			 * 读取轮播图片
			 * 
			*/
			banner_get(id){
				var that = this
				that.$common.get_request(
					{
						type:'banner_get',
					},
					(res)=>{
						that.banner.list = res.list
					}
				);
			},
			
			/**
			 * 读取 第三方小程序 图片
			 * 
			*/
			appletGet(){
				var that = this
				that.$common.get_request(
					{
						type:'applet_get',
					},
					(res)=>{
						that.applet.list = res.list
					}
				);
			},
			
			/**
			 * 删除推荐 第三方小程序
			 * 
			*/
			appletDelete(id){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确定删除此信息？',
					confirmText: "删除",
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{type:'appletDelete',id:id},
								(res)=>{
									that.appletGet()
								}
							);
						} else if (res.cancel) {
							
						}
					}
				});
			},
			/**
			 * 读取分类
			 * 
			*/
			loadHeader(){
				var that = this
				that.$common.get_request(
					{type:'goods_header_list'},
					(res)=>{
						that.headerData.list = res.list
					}
				);
			},
			
			/**
			 * 选择分类的回调
			 * 
			*/
			call_directory(res){
				// let item = this.headerData.list[res.header.index].list[res.directory.index]
				//this.headerData.seleList.push(item)
				this.header_home_up(res.directory.id)
			},	
			/**
			 * 读取推荐目录
			 * 
			*/
			header_home_get(){
				var that = this
				that.$common.get_request(
					{type:'header_home_get'},
					(res)=>{
						that.headerData.seleList = res.list
					}
				);
			},
			/**
			 * 删除推荐目录
			 * 
			*/
			header_home_de(id){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确定删除此信息？',
					confirmText: "删除",
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{type:'header_home_de',id:id},
								(res)=>{
									that.header_home_get()
								}
							);
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			/**
			 * 增加推荐目录
			 * 
			*/
			header_home_up(id){
				var that = this
				that.$common.get_request(
					{type:'header_home_up',directory_id:id},
					(res)=>{
						that.header_home_get()
						
					}
				);
			},
			
			/**
			 * 读取推荐商品
			 * 
			*/
			goods_home_get(){
				var that = this
				that.$common.get_request(
					{type:'goods_home_get'},
					(res)=>{
						that.addGoods.list = res.list
					}
				);
			},
			/**
			 * 删除推荐商品
			 * 
			*/
			goods_home_de(id){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确定删除此信息？',
					confirmText: "退出",
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{type:'goods_home_de',id:id},
								(res)=>{
									that.goods_home_get()
								}
							);
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			/**
			 * 增加推荐商品
			 * 
			*/
			goods_home_up(){
				var that = this
				if(this.addGoodsList.length<=0){
					that.goods_home_get()
					return
				}
				this.addGoodsList.splice(0,1)
				that.$common.get_request(
					{type:'goods_home_up',goods_id:that.addGoodsList[0]},
					(res)=>{
						that.goods_home_up()
					}
				);
			},
			
		}
	}
</script>

<style>
</style>
